<template>
  <view class="hospital-select">
    <!-- 顶部搜索栏 -->
    <view class="search-bar">
      <view class="search-input">
        <uni-icons type="search" size="16" color="#999"></uni-icons>
        <input 
          v-model="searchKeyword" 
          placeholder="搜索医院" 
          @input="onSearch"
          class="input"
        />
      </view>
    </view>

    <!-- 医院列表 -->
    <view class="hospital-container">
      <view 
        v-for="hospital in filteredHospitals" 
        :key="hospital.id" 
        class="hospital-item"
        @click="selectHospital(hospital)"
      >
                 <view class="hospital-info">
           <view class="hospital-name">{{ hospital.realName }}</view>
           <view class="hospital-desc">{{ hospital.email || '暂无描述' }}</view>
           <view class="hospital-meta">
             <view class="meta-item">
               <uni-icons type="phone" size="14" color="#666"></uni-icons>
               <text class="meta-text">{{ hospital.phone || '电话待定' }}</text>
             </view>
             <view class="meta-item">
               <uni-icons type="person" size="14" color="#666"></uni-icons>
               <text class="meta-text">{{ hospital.username || '用户名待定' }}</text>
             </view>
           </view>
         </view>
        <view class="hospital-arrow">
          <uni-icons type="right" size="16" color="#ccc"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-if="hospitals.length === 0 && !loading" class="empty-state">
      <image src="/static/images/empty.png" class="empty-image" />
      <text class="empty-text">暂无医院信息</text>
    </view>

    <!-- 加载状态 -->
    <view v-if="loading" class="loading">
      <uni-load-more status="loading" />
    </view>
  </view>
</template>

<script>
import { ref, computed, onMounted } from 'vue'

export default {
  name: 'HospitalSelect',
  setup() {
    const hospitals = ref([])
    const loading = ref(false)
    const searchKeyword = ref('')

    // 过滤后的医院列表
    const filteredHospitals = computed(() => {
      if (!searchKeyword.value) {
        return hospitals.value
      }
      return hospitals.value.filter(hospital => 
        hospital.realName.includes(searchKeyword.value) ||
        (hospital.email && hospital.email.includes(searchKeyword.value)) ||
        (hospital.phone && hospital.phone.includes(searchKeyword.value)) ||
        (hospital.username && hospital.username.includes(searchKeyword.value))
      )
    })

    // 获取医院列表
    const fetchHospitals = async () => {
      loading.value = true
      try {
        console.log('开始获取医院列表...')
        const response = await uni.request({
          url: 'http://localhost:8080/admin/list',
          method: 'GET',
          header: {
            'Content-Type': 'application/json'
          }
        })

        console.log('医院列表响应:', response)

        if (response.statusCode === 200 && response.data.code === 200) {
          hospitals.value = response.data.data || []
          console.log('获取医院列表成功:', hospitals.value)
        } else {
          console.error('获取医院列表失败:', response.data)
          uni.showToast({
            title: response.data.message || '获取医院列表失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('获取医院列表错误:', error)
        uni.showToast({
          title: '网络错误，请稍后重试',
          icon: 'none'
        })
      } finally {
        loading.value = false
      }
    }

    // 搜索功能
    const onSearch = () => {
      // 实时搜索，不需要额外处理，computed会自动过滤
    }

    // 选择医院
    const selectHospital = (hospital) => {
      // 返回上一页并传递选中的医院信息
      const pages = getCurrentPages()
      if (pages.length > 1) {
        const prevPage = pages[pages.length - 2]
        // 设置上一页的数据
        if (prevPage.$vm && prevPage.$vm.setSelectedHospital) {
          prevPage.$vm.setSelectedHospital(hospital.realName)
        } else {
          // 如果上一页没有setSelectedHospital方法，直接跳转到活动列表
          uni.navigateTo({
            url: `/pages/activity/list?hospital=${encodeURIComponent(hospital.realName)}`
          })
        }
      } else {
        // 如果没有上一页，直接跳转到活动列表
        uni.navigateTo({
          url: `/pages/activity/list?hospital=${encodeURIComponent(hospital.realName)}`
        })
      }
      
      uni.navigateBack()
    }

    onMounted(() => {
      fetchHospitals()
    })

    return {
      hospitals,
      loading,
      searchKeyword,
      filteredHospitals,
      onSearch,
      selectHospital
    }
  }
}
</script>

<style scoped>
.hospital-select {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.search-bar {
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.search-input {
  display: flex;
  align-items: center;
  background-color: #f8f8f8;
  border-radius: 20rpx;
  padding: 20rpx;
}

.input {
  flex: 1;
  margin-left: 20rpx;
  font-size: 28rpx;
}

.hospital-container {
  padding: 20rpx;
}

.hospital-item {
  background-color: #fff;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  padding: 30rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.hospital-info {
  flex: 1;
}

.hospital-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 15rpx;
  line-height: 1.4;
}

.hospital-desc {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
  margin-bottom: 20rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.hospital-meta {
  margin-bottom: 10rpx;
}

.meta-item {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.meta-text {
  margin-left: 15rpx;
  font-size: 26rpx;
  color: #666;
}

.hospital-arrow {
  margin-left: 20rpx;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

.loading {
  padding: 40rpx 0;
  text-align: center;
}
</style>
